<template>
  <div class="program-manager" id="program-manager">
    <!-- tab标签页 -->
    <a-tabs
      default-active-key="1"
      @change="callback"
      :tabBarGutter="57"
      size="large"
    >
      <a-tab-pane key="1" tab="储备中"> </a-tab-pane>
      <a-tab-pane key="2" tab="进行中" force-render>
        <!-- <a-empty :description="false" style="margin: 100px 0">
          暂无纵向分析
        </a-empty> -->
      </a-tab-pane>
      <a-tab-pane key="3" tab="已结束" force-render> </a-tab-pane>
    </a-tabs>
    <!-- 工具栏 -->
    <div class="tooltips">
      <div class="bars" id="bars">
        <div class="bar">
          <a-space :size="10">
            <div class="tool-bar">
              <div style="min-width: 70px">条件筛选：</div>
              <a-select
                style="width: 240px"
                @change="handleChange"
                placeholder="请选择企业层级"
              >
                <a-select-option value="jack"> Jack </a-select-option>
                <a-select-option value="lucy"> Lucy </a-select-option>
                <a-select-option value="disabled" disabled>
                  Disabled
                </a-select-option>
                <a-select-option value="Yiminghe"> yiminghe </a-select-option>
              </a-select>
            </div>
            <div class="tool-bar">
              <div style="min-width: 70px">条件筛选2：</div>
              <a-select
                style="width: 240px"
                @change="handleChange"
                placeholder="二级筛选条件"
              >
                <a-select-option value="jack"> Jack </a-select-option>
                <a-select-option value="lucy"> Lucy </a-select-option>
                <a-select-option value="disabled" disabled>
                  Disabled
                </a-select-option>
                <a-select-option value="Yiminghe"> yiminghe </a-select-option>
              </a-select>
            </div>
          </a-space>
        </div>
        <div class="btn">
          <a-button type="danger">数据导入</a-button>
          <a-button type="primary">数据导出</a-button>
        </div>
      </div>
    </div>
    <!-- 项目信息列表看板 -->
    <a-space :size="20" style="margin-top: 30px">
      <a-button
        type="danger"
        :ghost="isProgramInfo"
        @click="isProgramInfo = false"
        >项目实时进度看板</a-button
      >
      <a-button
        type="danger"
        :ghost="!isProgramInfo"
        @click="isProgramInfo = true"
        >项目信息列表看板</a-button
      >
    </a-space>

    <!-- 项目任务进度趋势&项目成本使用趋势 -->
    <div class="process">
      <div>项目任务进度趋势&项目成本使用趋势</div>
      <a-space :size="10" style="margin-top: 30px">
        <div>显示维度：</div>
        <a-button type="danger" ghost>日</a-button>
        <a-button type="danger">月</a-button>
        <a-button type="danger" ghost>季度</a-button>
      </a-space>
    </div>
    <!-- 选中 项目信息列表看板 -->
    <program-table v-if="isProgramInfo" />
    <!-- 选中项目实时进度看板 -->
    <program-real-time v-else />
  </div>
</template>

<script>
import ProgramTable from "./components/table";
import ProgramRealTime from "./components/program-real-time";
export default {
  components: {
    ProgramTable,
    ProgramRealTime,
  },
  data() {
    return {
      isProgramInfo: false,
    };
  },
  methods: {
    handleCancel() {
      console.log("Clicked cancel button");
      this.visible = false;
    },
    callback(key) {
      console.log(key);
    },
    handleChange() {},
  },
};
</script>

<style lang="less" scoped>
.bars {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  // background-color: #fff;
  & > div:nth-child(2) {
    width: 230px;
    padding: 0 10px 0 20px;
  }
  & > div:nth-child(1) {
    flex: 1;
  }
  &::-webkit-scrollbar {
    width: 1px;
    cursor: pointer;
  }
}
.btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bar {
  width: calc(100% + 40px - 30px - 40px);
  display: flex;
  overflow-x: auto;
  .tool-bar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 20px;
  }
}

.info-btn {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.process {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #333333;
  padding-right: 10px;
  margin-bottom: 20px;
  & > div {
    margin-top: 5px;
  }
}
</style>